<!DOCTYPE html>
<html>
  <head>
    <!-- <script src="node_modules/three/build/three.js"></script> -->
    <!-- // 配置addons/等价于examples/jsm/。 -->
    <script type="importmap">
      {
        "imports": {
          "three": "./node_modules/three/build/three.module.js",

          "three/addons/": "./node_modules/three/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      // three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
      // 扩展库OrbitControls.js 相机控件
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
      // 扩展库GLTFLoader.js
      import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
      console.log(OrbitControls);
      console.log(GLTFLoader);

      const width = window.innerWidth;
      const height = window.innerHeight;
      // 开始创建
      // 设置场景,坐标原小 0，0，0 中场景中央
      const scene = new THREE.Scene();

      // 现在已经把几何体放到场景中了，但还需要一只眼睛
      // 这是一个透视摄像机
      // 第一个参数，视角，视角越大，看的东西越多，相对就越小。
      // 第二个参数，宽高比例
      // 第三个参数，当被观测物体的边界小于这个值时，不可见。，如果，在10 的位置，物体高为 10，那么物体就顶天立地
      // 第四个参数，当被观测物体的边界大于这个值时，不可见。
      const camera = new THREE.PerspectiveCamera(50, width / height, 10, 1000);

      // 设置摄像机的位置
      camera.position.set(-20, 15, 90);

      // 设置摄像机的观察点
      camera.lookAt(0, 0, 100);

      // 摄像机从 x -12 向 x 0 方向观察
      console.log(`camera`, camera.position);

      //camera.position.z=50

      // 设置几何体，几何体 x 方向宽度为 4 ，则x 负半轴为长度为 2，
      // 摄像机 x -12 , -12 - -2 =  10 为摄像机的近裁截面，所以这是能看见的最小距离
      const box = new THREE.BoxGeometry(4, 8, 2);

      // 设置材质 MeshBasicMaterial 基础材质不受光影响，得换一个

      const material = new THREE.MeshLambertMaterial({
        color: 0x0000ff,
        transparent: true, // 开启透明
        opacity: 0.5, // 透明度
      });

      // 创建网格模型
      const mesh = new THREE.Mesh(box, material);

      mesh.position.set(0, 0, 100);
      console.log(`mesh`, mesh.position);

      // 放到场景中
      scene.add(mesh);

      // 点光源
      const pointLight = new THREE.PointLight(0xffffff, 1.0);
      pointLight.position.set(-50, 50, 80); //点光源放在x轴上

      scene.add(pointLight);

      // 设置渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);

      // 设置空间背景颜色
      renderer.setClearColor(0xcccccc);

      // 设置相机
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.addEventListener("change", function () {
        console.log('change');
        renderer.render(scene, camera);
      });

      // renderer.render(scene, camera);

      // document.body.appendChild(renderer.domElement);
    </script>

    <!-- <script type="module">
      import * as THREE from "three";
      // 浏览器控制台测试，是否引入成功
      console.log(THREE.Scene);
      console.log("完成");
    </script> -->
    <!-- <script>
    console.log(THREE.Scene)
</script> -->
  </head>
  <body>
    <div>相机控件</div>
  </body>
</html>
